<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>五星好评</title>
	</head>
	<body>
		<table align="center">
			<tr>
				<td id="1">☆</td>
				<td id="2">☆</td>
				<td id="3">☆</td>
				<td id="4">☆</td>
				<td id="5">☆</td>
			</tr>
		</table>
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		
			// 获取所有的td，并绑定鼠标悬停事件
			var tds = $("td");
			// 循环绑定td元素的悬停事件
			tds.each(function(){
				// 设置鼠标的样式
				$(this).css("cursor","pointer");
				// 绑定鼠标悬停事件
				$(this).mouseover(function(){
					// 得到鼠标所在位置的id
					var index = $(this).attr("id");
					console.log(index);
					
					// 将鼠标所在位置前面的td的内容设置为★
					for(var i = 0; i < index; i++) {
						// 设置td的内容
						$(tds[i]).html("★");
					}
					
					// 将鼠标所在位置后面的td的内容设置为☆
					for (var j = tds.length; j > index -1; j--) {
						// 设置td的内容
						$(tds[j]).html("☆");
					}
				});
			});
			
		</script>
	</body>
</html>
